<template>
  <view>
    <u-line color="blue" />
    <view v-for="(item,index) in list" :key="index">
      <view class="list" >
        <view>{{ item.gmtCreate | timestampFormat }} <text>{{ item.type | contentText }}</text></view>
        <view>{{ item.gmtModified | statusFilter }}</view>
      </view>
      <u-line color="blue" />
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
import {timestampFormat} from "../../utils/date";

export default {
  data() {
    return {
      list: [],
      status: '',
      courseId: 1,
      page: 1,
      total: 0
    };
  },
  onLoad(e){
    uni.$emit("setVuexUserInfo", {user: null, isLoginPage: false});
    this.courseId = e.id;
    this.initial()
  },
  onPullDownRefresh(){
    this.initial();
  },
  onReachBottom() {
    this.page = ++ this.page;
    this.status = 'loading';
    if((this.page - 1) * 10 > this.total) {
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }else {
      this.getSignStatusList().then(res => {
        this.total = res.total;
        this.signTasks = this.list.concat(res.data);
      });
      this.status = 'loadmore';
    }
  },
  methods:{
    initial(){
      this.page = 1;
      this.total = 0;
      this.getSignStatusList().then(res => {
        this.list = res.data;
        this.total = res.total;
        uni.stopPullDownRefresh();
      })
    },
    async getSignStatusList(){
      let data = await this.$u.api.getSignStatusList(this.courseId,this.page,this.$store.getters.id);
      return data;
    }
  },
  filters: {
    statusFilter(v){
      if (v != null){
        return '已签到';
      }else {
        return '未签到';
      }
    },
    timestampFormat:timestampFormat,
    contentText(v){
      let str = '';
      if(v === 1){
        str = '一键签到';
      }else if(v === 2){
        str = '扫码签到';
      }else if(v === 3){
        str = '手势密码';
      }
      return str;

    }
  }
}
</script>

<style lang="scss">
.list {
  display: flex;
  justify-content: space-between;
  margin: 25rpx;
  font-size: 30rpx;
  font-weight: bolder;
  color: $u-main-color;
  text{
    background:$u-bg-color;
    margin-left: 25rpx;
  }
}
</style>
